<!DOCTYPE html>
<html data-framework="lit">
    <head>
        <meta charset="utf-8" />
        <title>TodoMVC: Lit</title>
        <script type="module" src="./index.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
            }
            body {
                font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
                line-height: 1.4em;
                background: #f5f5f5;
                color: #111111;
                min-width: 230px;
                max-width: 550px;
                margin: 0 auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                font-weight: 300;
            }
            .info {
                margin: 65px auto 0;
                color: #4d4d4d;
                font-size: 11px;
                text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
                text-align: center;
            }
            .info p {
                line-height: 1;
            }
            .info a {
                color: inherit;
                text-decoration: none;
                font-weight: 400;
            }
            .info a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <todo-app></todo-app>
        <footer class="info">
            <p>Double-click to edit a todo</p>
            <p>Written by <a href="https://github.com/lit">the lit team</a></p>
            <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
        </footer>
    </body>
</html>
